<template>
    <div class="index clearfix">
        <div class="bg-blue-radius user-state clearfix">
            <i></i>
             <div style="margin-left: 50px;padding-top: 16px;line-height: 25px;"> <span class="font-size-16">{{this.userInfo.userName}}</span><br><span>最近一次登录:2018.8.24 12:41:52</span></div>
             
             <el-button class="pull-right btn-complate" v-if="this.userInfo.idIdenty == '1'" icon="el-icon-check"> 已实名</el-button>
             <el-button class="pull-right btn-complate" v-else icon="el-icon-s-custom" @click="goRealName">去实名</el-button>
             
        </div>

        <div>
            <span class="sub-title">个人资料</span>
        </div>
        <div class="bg-blue-radius" style="line-height:40px;">
            <span class="font-light-gray">用户名</span> <span class="font-white pull-right">{{this.userInfo.nickname}} <i class="el-icon-arrow-right padding-left-5"></i></span>
        </div>
        <div>
            <span class="sub-title">个人信息</span>
        </div>
        
        <div class="bg-blue-radius">
            <ul>
                <li class="font-gray">
                    <span class="font-light-gray">姓名</span> <span class="pull-right">{{this.userInfo.userName}}</span>
                </li>
                <li class="font-gray" v-if="this.userInfo.phoneNum">
                    <span class="font-light-gray">手机号</span> <span class="pull-right" >{{this.userInfo.phoneNum}}</span>
                </li>
                 <li class="font-gray ">
                    <span class="font-light-gray">证件号码</span> <span class="pull-right" >{{this.userInfo.idCard}}</span>
                </li>
                 <li class="font-gray hide">
                    <span class="font-light-gray">国家</span> <span class="pull-right" >{{this.userInfo.country}}</span>
                </li>
                 <li class="font-gray hide">
                    <span class="font-light-gray">城市</span> <span class="pull-right" >{{this.userInfo.provity}}</span>
                </li>
                 <li class="font-gray hide">
                    <span class="font-light-gray">证件地址</span> <span class="pull-right" >{{this.userInfo.cardAddress}}</span>
                </li>
            </ul>
        </div>
    </div>
  
</template>
<script>
import {getAuthInfo} from '@/ajax/index'
import {mapState} from 'vuex'
export default {
    name:'Index',
    data(){
        return{
            userInfo:''
        }
    },
    mounted(){
        this.getUserInfo();
        
    },
    methods:{
        goRealName(){
            this.$router.push({path:'realName'});
        },
        async getUserInfo(){
            const param = {
                'customerId':this.$store.state.userId,
            }
            const result = await getAuthInfo(param);
            if(result.code === '200' && result.data.state === '1'){
                 this.userInfo = result.data.data
            }else{
                alert(result.data.message);
            }
        }

    }
}
</script>

<style lang="less" scoped>
    .index{padding-top: 120px;
        .bg-blue-radius{background-color: #242645;border-radius: 4px;padding: 0 20px;}
        .user-state{ height: 90px;position: relative;
            i{display: inline-block;width: 40px;height: 40px;border-radius: 50%;position: absolute;top: 22px;background: url('./../img/spirit.png') no-repeat;background-position: -26px -832px;
            }
            .btn-complate{color: #23c224;position: absolute;right: 24px;top: 25px;background: none;border: 1px solid #23c224;}
        }
        .sub-title{line-height: 40px;vertical-align: -30px;letter-spacing: 1px;}
        ul>li{list-style: none;line-height: 40px;border-bottom: 1px solid #2e3052;font-size: 12px;}
        ul>li:nth-last-child(1){border-bottom: none;}
        .font-light-gray{color: #a7a8cd;}
    }
</style>

